<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%layout("/WEB-INF/view/common/inc/admin_head.html",{title:'', styles:'bootstrap,font-awesome,animate,style,bootstrap-table,fixed'}){%>

    <style type="text/css">
        body{padding-top:10px;}
        *{margin:0;padding:0;list-style-type:none;}
        a,img{border:0;}
        .demo h2{font-size:16px;color:#3366cc;height:30px;}
        .demo li{float:left;}
    </style>
    <%}%>
</head>
<body>
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <!-- START 右侧数据 -->
            <div class="ibox float-e-margins" style="margin-bottom: 0px;">
                <div class="ibox-content" style="padding:15px 20px 0px 20px;">
                    <form id="search-form" role="form" class="form-horizontal" autocomplete="off">
                        <div class="form-group">
                            <label class="control-label col-sm-1">主体:</label>
                            <div class="col-sm-2">
                                <select id="shopName" name="shopName" class="form-control">
                                    <option value="">全部</option>
                                    <%for(var dict in shop){%>
                                    <option value="${dict.detailName}">${dict.detailName}</option>
                                    <%}%>
                                </select>
                            </div>
                            <label class="control-label col-sm-1">店铺:</label>
                            <div class="col-sm-2">
                                <select id="brandName" name="brandName" class="form-control">
                                    <option value="">全部</option>
                                    <%for(var dict in brand){%>
                                    <option value="${dict.detailName}">${dict.detailName}</option>
                                    <%}%>
                                </select>
                            </div>
                            <label class="control-label col-sm-1">国家:</label>
                            <div class="col-sm-2">
                                <select id="countryName" name="countryName" class="form-control">
                                    <option value="">全部</option>
                                    <%for(var dict in country){%>
                                    <option value="${dict.detailName}">${dict.detailName}</option>
                                    <%}%>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-1">期间:</label>
                            <div class="col-sm-2">
                                <input type="text" id="period" name="period" placeholder="请选择期间" class="form-control">
                            </div>
                            <label class="control-label col-sm-1">SKU:</label>
                            <div class="col-sm-2">
                                <input type="text" id="sku" name="sku" placeholder="请填写SKU" class="form-control">
                            </div>
                            <label class="control-label col-sm-1">Listing:</label>
                            <div class="col-sm-2">
                                <input type="text" id="listingName" name="listingName" placeholder="请填写Listing" class="form-control">
                            </div>
                            <label class="control-label col-sm-1">币种:</label>
                            <div class="col-sm-2">
                                <select id="moneyType" name="moneyType" class="form-control">
                                    <option value="">请选择</option>
                                    <option value="美金">美金</option>
                                    <option value="欧元">欧元</option>
                                    <option value="英镑">英镑</option>
                                    <option value="加元">加元</option>
                                    <option value="日元">日元</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-1"></label>
                            <a class="search-btn btn  btn-success" >查询</a>
                            <a class="export-btn btn btn-success"><i class="glyphicon glyphicon-list-alt" aria-hidden="true"></i> 导出当前数据</a>
                        </div>
                    </form>
                </div>
            </div>
            <!-- START 数据表格 -->
            <div id="showTable" style="width: auto;height:auto">
                <table id="flowTable"
                       data-toolbar="#toolbar"
                       data-side-pagination="server"
                       data-pagination="true"
                       data-resizable="true"
                       data-page-size="15"
                       class="table table-striped table-hover"
                       style="table-layout:fixed;"
                       >
                </table>
            </div>
            <!-- END 数据表格 -->

            <!-- END 右侧数据 -->
        </div>
    </div>
    <iframe src="about:blank" name="hiddenIframe" id="hiddenIframe" class="hide"></iframe>
</div>

<%layout("/WEB-INF/view/common/inc/admin_js.html",{modules:'jquery,bootstrap,bootstrap-table,dtvalidate,dtvalidate-lang-zh_cn,bootstrap-table-zh-CN,laydate,layer,fixed'}){}%>

<script type="text/javascript">
    laydate.render({
        elem: '#orderBegDate' //指定元素
        ,trigger: 'click'
    });
    laydate.render({
        elem: '#orderEndDate' //指定元素
        ,trigger: 'click'
    });
    laydate.render({
        elem: '#period',
        type: 'month'
        ,trigger: 'click'
    });

    $(".export-btn").click(function () {
        window.location.href='/sea/finance/vt/exportReport.do';
    });
    var $table = $('#flowTable');
    $(".search-btn").on('click',function () {
        var period=$("#period").val();
        if(period==''){
            parent.layer.msg('请先选择日期！',{icon: 0,time:1500,shade: [0.8, '#393D49']});
            return;
        }
        var shopName=$("#shopName").val();
        if(shopName==''){
            parent.layer.msg('请先选择主体！',{icon: 0,time:1500,shade: [0.8, '#393D49']});
            return;
        }
        var index = layer.load(1, {
            shade: [0.1,'#fff'] //0.1透明度的白色背景
        });
        $.ajax({
            url:'/sea/finance/vt/getStockHeader',
            success:function (data) {
                $.ajax({
                    url:'/sea/finance/vt/getStockBody',
                    data:{
                        'period':$("#period").val(),
                        'shop_name':$("#shopName").val(),
                        'brand_name':$("#brandName").val(),
                        'country_name':$("#countryName").val(),
                        'sku':$("#sku").val(),
                        'listing_name':$("#listingName").val(),
                        'moneyType':$("#moneyType").val()
                    },
                    success:function (res) {
                        buildTable2($table, data,res);
                        layer.close(index);
                    }
                });

            }
        });
    });
    function buildTable2($el, cells,rows) {
        var i; var j; var row
        var columns = []
        var data = []
        var dataColumn=['主体','店铺','国家','SKU','Listing']
        for (i = 0; i < cells.length; i++) {
            if(i<5){
                var width=150;

                columns.push({
                    field: cells[i],
                    title: dataColumn[i],
                    width:width
                })
            }else{
                columns.push({
                    field: cells[i],
                    title: cells[i],
                    width:100
                })
            }
        }
        if(null!=rows) {
            for (i = 0; i < rows.length; i++) {
                row = {}
                for (j = 0; j < cells.length; j++) {
                    var map = rows[i];
                    for (var k in map) {
                        if (k == cells[j]) {
                            row[cells[j]] = map[k];
                        }
                    }
                }
                data.push(row)
            }
        }
        $el.bootstrapTable('destroy').bootstrapTable({

            columns: columns,
            pagination: true,
            sidePagination: "client",
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],
            data:data,
            onLoadSuccess : function(res){
                setTimeout(setWidth(),1000);
            }
        })
    }

    function setWidth() {
        $('.fixed-table-header-columns').css('width','490px');
        $('.table table-striped table-hover').css('width','490px');
        $('.fixed-table-pagination').css('float','right');

    }
</script>
</body>
</html>